<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="../../css/base.css" />
	<link rel="stylesheet" href="../../css/info-mgt.css" />
	<link rel="stylesheet" href="../../css/info-reg.css" />
	<link rel="stylesheet" href="../../css/WdatePicker.css" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript" src="../../js/WdatePicker.js"></script>
	<script type="text/javascript" src="../../js/jquery.pagination.js"></script>
  </head>
  
  <body>
    <div class="title"><h2>员工通讯录</h2></div>
    <div class="query">
		<div class="query-conditions ue-clear">
			<div class="conditions name ue-clear">
	            <label>员工名称:</label>
	            <div class="select-wrap">
	                <div class="select-title ue-clear">
	                	<!-- 标题text文本框 -->
	                	<input type="text" id="staffName" style="width:100%; border:0px solid red;" placeholder="请输入员工名称" />
	                </div>
	            </div>
	        </div>
	        <div class="conditions name ue-clear">
	            <label>部门名称:</label>
	            <div class="select-wrap">
	                <div class="select-title ue-clear"><span id="dept">请选择</span><i class="icon"></i></div>
	                <ul class="select-list" id="liDept">
	                    <!-- 部门li标签 -->
	                </ul>
	            </div>
	        </div>
	    </div>
	    <div class="query-btn ue-clear">
	    	<a href="javascript:;" class="confirm">查询</a>
	        <a href="javascript:;" class="clear">清空条件</a> 
	    </div>
	</div>
	
	<div class="table-box">
		<table>
	    	<thead>
	        	<tr>
	            	<th class="num">员工名称</th>
	                <th class="name">电话号码</th>
	                <th class="process">所属部门</th>
	            </tr>
	        </thead>
	        <tbody id="contactTable">
	        	<!-- 工作计划表格 -->
	        </tbody>
	    </table>
	</div>
	<!-- 分页按钮 ------------------------------------------------->
	<div style="margin:0px auto; width:100%; text-align:center;">
	  	<table id="tableLast" width="80%" align="center" border="0">
	  		<tr align="center">
	  			<td width="75%"></td>
	  			<td><a href="javascript:void(0);" id="headPage">首页</a></td>
	  			<td><a href="javascript:void(0);" id="backPage">上一页</a></td>
	  			<td align="right">当前页面:</td>
	  			<td width="8%" align="left"><input type="text" id="page" value="1" style="width:20%;">
	  				<a href="javascript:void(0);" id="skipPage">跳转</a>&nbsp;&nbsp;
	  				<label id="nowPage">1</label>/<label id="countPage"></label>
	  			</td>
	  			<td><a href="javascript:void(0);" id="nextPage">下一页</a></td>
	  			<td><a href="javascript:void(0);" id="lastPage">末页</a></td>
	  		</tr>
	  	</table>
	  	<br/>
  	</div>
  </body>
  
  <script type="text/javascript">
  	//分页条件字符串
  	var condition="";
  	var other="";
  	$(function(){
  		//异步查询部门信息 加入下拉列表
		$.ajax({
		 type:"POST",
		 url:"planConditionManager.action",
		 data:"method=queryDept",
		 success:function(msg){
		 	var str="";
		 	for(var i=0;i<msg.length;i++){
		 		str+="<li>"+msg[i].deptName+"</li>";
		 	}
		 	$("#liDept").html(str);
		 }
		});
  		//分页函数
  		function paging(condition){
  			if(isCondition){
  				var dept=$("#dept").text();
				var staffName=$("#staffName").val();
				if(dept!="请选择"){
					other+="&dept_name="+dept;
				}
				if(staffName!=""){
					other+="&user_name="+staffName;
				}
  			}
  			$.ajax({
	  		 type:"POST",
	  		 url:"accLwg*message_view.paging",
	  		 data:condition+other,
	  		 success:function(data){
	  		 	other="";
	  		 	var str="";
	  		 	for(var i=0;i<data.data.length;i++){
	  		 		str+="<tr><td class='num'>"+data.data[i].name+"</td>";
	  		 		str+="<td class='name'>"+data.data[i].phone+"</td>";
	  		 		str+="<td class='name'>"+data.data[i].dept+"</td></tr>";
	  		 	}
	  		 	if(i<15){
			 		for(;i<15;i++){
			 			str+="<tr><td class='name'> - </td></tr>";
			 		}
			 	}
	  		 	$("#contactTable").html(str);
	  		 	//向上取整总页数
				$("#countPage").text(Math.ceil(data.rowNum/15));
	  		 }
	  		 
	  		});
  		}
  		//调用分页函数加载初始数据
  		condition="nowPage=0&turnType=next";
  		paging(condition);
  		
  		//首页
		$("#headPage").click(function(){
			if($("#nowPage").text()==1){
			}else{
				condition="nowPage=0&turnType=next";
				paging(condition);
				$("#nowPage").text(1);
				$("#page").val(1);
			}
		});
		//末页
		$("#lastPage").click(function(){
			if($("#nowPage").text()==$("#countPage").text()){
			}else{
				condition="nowPage="+(parseInt($("#countPage").text())-1)+"&turnType=next";
				paging(condition);
				$("#nowPage").text($("#countPage").text());
				$("#page").val($("#nowPage").text());
			}
		});
		//上一页
		$("#backPage").click(function(){
			if($("#nowPage").text()==1){
			}else{
				condition="nowPage="+$("#nowPage").text()+"&turnType=back";
				paging(condition);
				$("#nowPage").text(parseInt($("#nowPage").text())-1);
				$("#page").val($("#nowPage").text());
			}
		});
		//下一页
		$("#nextPage").click(function(){
			if($("#nowPage").text()==$("#countPage").text()){
			}else{
				condition="nowPage="+$("#nowPage").text()+"&turnType=next";
				paging(condition);
				$("#nowPage").text(parseInt($("#nowPage").text())+1);
				$("#page").val($("#nowPage").text());
			}
		});
		//跳转页面
		$("#skipPage").click(function(){
			if($("#page").val()>$("#countPage").text()||$("#page").val()<1||
			$("#page").val()==$("#nowPage").text()){
			}else{
				condition="nowPage="+(parseInt($("#page").val())-1)+"&turnType=next";
				paging(condition);
				$("#nowPage").text($("#page").val());
			}
		});
		
		//清空按钮
		$(".clear").click(function(){
			$("#dept").text("请选择");
			$("#staffName").val("");
			isCondition=false;
			
		});
		var isCondition=false;//是否使用查询条件
		//查询按钮
		$(".confirm").click(function(){
			//调用分页
			isCondition=true;
			condition="nowPage=0&turnType=next";
			paging(condition);
		});
  	});
  
  
  
  
  
  
  	//改变分页按钮字体大小
	$("#tableLast tr td").css("font-size","15px");
	$("#tableLast tr td").css("background","url(../../images/righttitlebig.png)");
	
	$(function(){
		$(".select-title").on("click",function(){
			$(".select-list").hide();
			$(this).siblings($(".select-list")).show();
			return false;
		});
		$(".select-list").on("click","li",function(){
			var txt = $(this).text();
			$(this).parent($(".select-list")).siblings($(".select-title")).find("span").text(txt);
		});
	});
  </script>
</html>
